<template>
	<view class="">
		<view class="actionBox">
			<view class="tac">
				<view :class="[className,'imgBox','mauto']"
					:style='{"transform" : mirrorImage ? "rotateY(180deg)":"rotate(0deg)"}'></view>
			</view>

			<view class="tac fwb mt40">{{introduction}}</view>
		</view>
		
		<qiun-data-charts class="charts-box" v-if="waveform" type="tline" :chartData="chartData"
			:inScrollView="true" background="none" :animation="false" :tooltipShow="false" :tapLegend="false"
			:ontap="false" :onmouse="false" />


			
		<view class="flex flex-jcsa flex-aic mt60" v-if="showBtn">
			<view class="btn" @click="perpare" v-if="isStart">我准备好了</view>
		
			<view class="btn" @click="again" v-if="!isStart">重新测试</view>
			<view class="btn" @click="nextTap" v-if="!isStart">{{ last?'完成':'下一项' }}</view>
		</view>
		
		<view class="btn mauto" @click="stop" v-if="isFinishBtn">结束测试</view>
		
		<view class="mt60 tac f54 fwb" v-if="showDown">{{countdown}}</view>
	</view>
</template>

<script>
	import qiunDataCharts from '../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	import equipment from '../../core/equipment.js'
	import Audio from '../../core/audio.js'
	export default {
		name: "",
		data() {
			return {
				showBtn: true,
				isStart: true,
				showDown: false,
				waveform: false, //显示波形图
				isFinishBtn:false,
				data: {},
				countdown: 5,
				chartData: {
					series: [{
						data: []
					}],
				},
			}
		},
		props: {
			last: {
				type: Boolean,
				default: false,
			},
			type: {
				type: Number,
				default: 0
			},
			introduction: {
				type: String,
				default: ""
			},
			mirrorImage: {
				type: Boolean,
				default: false
			},
			className: {
				type: String,
				default: ""
			},
			pageType: {
				type: String,
				default: "scrn"
			},
			sindex: {
				type: Number,
				default: 11
			},
			isfinish: {
				type: Boolean,
				default: false,
			}
		},
		components: {
			qiunDataCharts
		},
		mounted() {
			uni.setKeepScreenOn({
				keepScreenOn: true
			})
		},
		methods: {
			// 重新监测
			again() {
				this.showBtn = true;
				this.isStart = true;
				this.waveform = false; //显示波形图
				this.data = {};
				this.countdown = 5;
				this.chartData.series[0].data = [];
				console.log(this.chartData.series[0].data);
			},
			// 准备好了
			perpare() {
				let _this = this;
				_this.showBtn = false;
				_this.showDown = true;

				Audio.audio('actionCountdown', (res) => {})

				let timer = setInterval(() => {
					_this.countdown--;
					if (_this.countdown <= 0) {
						setTimeout(() => {
							_this.waveform = true;
							_this.showDown = false;
							_this.start();
						}, 1000)
						clearInterval(timer);
					}
				}, 1000)
			},
			// 开始监测
			start() {
				let t = this,
					time = 10;
				Audio.audio('actionDi', (res) => {
					t.audio = res;
				})
				let l = -1;
				equipment.start((res) => {
					l++;
					if (l % 10 == 0) {
						t.chartData.series[0].data.push([t.chartData.series[0].data.length, res]);
					}

				})

				let timers = setInterval(() => {
					time--;
					if (time <= 0 && !t.isfinish) {
						clearInterval(timers)
						t.stop();
					}
					if(time <2 && t.isfinish){
						clearInterval(timers)
						t.isFinishBtn = true;
					}
				}, 1000)
			},
			//停止监测
			stop() {
				let t = this;
				equipment.stop((res) => {
					t.data = res;
					t.isFinishBtn = false;
					t.showBtn = true;
					t.isStart = false;
					Audio.audioCtx.stop();
					Audio.audioCtx.loop = false;
					Audio.audioCtx.src = Audio.audioUrl['finish'];
					Audio.audioCtx.play();
				});
			},
			// 下一项
			nextTap() {
				this.$emit('changeindex', {
					sindex: this.sindex + 1,
					data: this.data
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.actionBox {
		width: 80%;
		height: auto;
		padding: 30rpx;
		border-radius: 16rpx;
		background-color: #f5f5f5;
		margin: 100rpx auto 40rpx;
	}
	.btn{
		width: 200rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		background-color: #a61b32;
		margin: 100 auto;
	}

	.imgBox {
		// width: 400rpx;
		height: 550rpx;
	}

	.L-01 {
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.R-01 {
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.R-02-05 {
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.R-05-2 {
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.C-06 {
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.C-07 {
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.C-08 {
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.C-09 {
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.R-10-11 {
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.R-11-2 {
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.C-12 {
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>
